<template>
	<view class="container">
         <view class="form-box">
			 <view class="title">宠物主姓名：</view>
			 <view class="text">{{info.name}}</view>
		 </view>
         <view class="form-box">
			 <view class="title">{{info.type==1 ?"犬品种":"猫咪品种"}}：</view>
			 <view class="text">{{info.breeds}}</view>
		 </view>
         <view class="form-box">
			 <view class="title">所属街道：</view>
			 <view class="text">{{info.street_name}}</view>
		 </view>
		 <view class="cret-box" v-if="info.type==1 && info.dog_cert_img">
			 <view class="title" >养犬登记证</view>
			 <view class="img-box"  :style="'background-image:url('+info.dog_cert_img+')'"  @click="previewImage(info.dog_cert_img)"></view>
			 <view class="number">登记证号：{{info.dog_cert_no}}</view>
		 </view>
		 <view class="cret-box" v-if="info.type==1 && info.vaccine_cert_img">
			 <view class="title">免疫证</view>
			 <view class="img-box"  :style="'background-image:url('+info.vaccine_cert_img+')'" @click="previewImage(info.vaccine_cert_img)"></view>
			 <view class="number">疫苗证号：{{info.vaccine_cert_no}}</view>
		 </view>
		 <view class="cret-box" v-if="info.type!=1">
			 <view class="title">疫苗记录</view>
			 <view class="img-box"  :style="'background-image:url('+info.vaccine_cert_img+')'" @click="previewImage(info.vaccine_cert_img)" ></view>
		 </view>
	</view>
	<view class="empty-box"></view>
	<fixed-footer>
		<primary-btn title="完成" @btnClick="goIndex()"></primary-btn>
	</fixed-footer>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					
				}
			}
		},
		onLoad(options) {
			if (options.certId) {
				//获取档案详情
				this.detail(options.certId);
			}
		},
		methods: {
			async detail(cert_id) {
				const res = await this.$request.get('api/pet/cert_detail', {cert_id:cert_id})
				if (res.code == 200) {
					this.info = res.data;
				}
			},
			previewImage(url) {
				uni.previewImage({urls:[url]})
			},
			goIndex() {
				uni.navigateTo({
					url: '/pages/cwdn/index'
				});
			},

		}
	}
</script>

<style scoped lang="scss">
.empty-box{
	width: 686rpx;
	height: 250rpx;
}
.container{
	width: 686rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin: 0 auto;
	margin-top:16rpx;
	padding-bottom: 40rpx;
	overflow: hidden;
	.form-box{
		width: 638rpx;
		height: 38rpx;
		margin:0 auto;
		margin-top:32rpx;
		.title{
			width: auto;
			height: 38rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
			float: left;
		}
		.text{
			width: auto;
			height: 32rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #7B7B7B;
			text-align: left;
			font-style: normal;
			text-transform: none;
			float: left;
		}
		
	}
	.cret-box{
		width: 638rpx;
		height: auto;
		margin:0 auto;
		margin-top:40rpx;
		.title{
			width: 170rpx;
			height: 42rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.img-box{
			display: block;
			width: 638rpx;
			height: 478rpx;
			margin-top:24rpx;
			margin-bottom: 24rpx;
			background-position: center center;
			background-repeat: no-repeat;
			-webkit-background-size:cover;
			-moz-background-size:cover;
			background-size:cover;
		}
		.number{
			width: auto;
			height: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
}
</style>
